<template>
  <div class="app-container">
    <div class="top">
      <div class="search">
        <div class="label">关键词:</div>
        <el-input v-model="query" style="width: 500px;margin: 0px 10px" size="middle"/>
        <el-button type="primary" @click="fetchData()">搜索</el-button>
        <el-button type="primary" size="small" @click="handleShowEdit()">新增</el-button>
      </div>

    </div>
    <div class="content">
      <el-card v-for="item in this.list" :key="item.id" class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ item.name }}</span>
          <el-button style="float: right; padding: 3px 0" type="text">详情</el-button>
        </div>
        <div class="count">数量:{{ item.count }}</div>
        <div class="count">来源:{{ item.source }}</div>
        <div class="count">标签:
          <el-tag v-for="(tag,index) in item.tags" :key="tag" :type="typeList[index%4]" size="mini" style="margin-right: 2px">{{tag}}</el-tag>
        </div>
        <div class="count">描述:{{ item.summary }}</div>
        <div class="count">时间:{{ item.created_time }}</div>
      </el-card>

    </div>
    <Pagination
      :page-size="page"
      :page-num="per_page"
      :page-total="total_count"
      @currentChange="currentChange"
      @sizeChange="sizeChange"
    />
    <el-dialog
      v-loading="isLoading"
      :title="dialogTitle"
      :visible.sync="addVisible"
      width="30%"
    >
      <el-form ref="personForm" :model="dataset" label-position="top">
        <el-form-item label="名称" prop="name">
          <el-input v-model="dataset.name" placeholder="名称"/>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="dataset.count" type='number' placeholder="数量"/>
        </el-form-item>
        <el-form-item label="源">
          <el-input v-model="dataset.source" placeholder="源"/>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="dataset.summary" placeholder="描述"/>
        </el-form-item>
        <el-form-item label="标签">
          <el-button @click="tags.push('')" type="primary" size="mini">新增标签</el-button>
          <div class="item" v-for="(item,index) in tags">
            <div style="margin-right: 10px">{{ index + 1 }}</div>
            <el-input v-model="tags[index]" width="50%"></el-input>
            <el-button type="danger" @click="this.tags.splice(index,1)" style="margin-left: 5px">删除</el-button>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import {getList, addDataset,} from '@/api/dataset'
import Pagination from "@/components/Pagination";

export default {
  components: {Pagination},
  data() {
    return {
      list: [
        {
          'count': 1,
          'created_time': 'Thu, 18 Jan 2024 18:01:35 GMT',
          'id': 1,
          'name': '测试',
          'source': 'http://baidu.com',
          'storage': 'badUrl4',
          'summary': '测试',
          'tags': [
            'ncbi'
          ],
          'updated_time': 'Thu, 18 Jan 2024 18:01:35 GMT'
        }
      ],

      isLoading: false,
      dataset: {},
      typeList:[
        'primary',
        'success','info','warning','danger'
      ],
      query:'',
      tags: [''],
      addVisible: false,
      dialogTitle: '新增',
      listLoading: true,
      page: 1,
      per_page: 12,
      total_count: 0
    }
  },
  created() {
    this.fetchData()
    console.log(this.page)
  },
  methods: {
    fetchData() {
      let {query, page, per_page} = this
      this.listLoading = true
      let params = {page, per_page}
      if(query!=='' && query!==null){
        params.query =query
      }
      getList(params).then(response => {
        console.log('res',response)
        this.list = response.data.result
        this.total_count = response.data.total_count
        this.listLoading = false
      })
    },
    currentChange(val) {
      this.page = val
      this.fetchData()
    },
    sizeChange(val) {
      this.per_page = val
      this.fetchData()
    },
    handleSubmit() {
      let {tags, dataset} = this
      dataset.tags = tags
      console.log(dataset)
      addDataset(dataset).then(res => {
        if (res) {
          this.$message.success('新增成功')
          this.addVisible = false
          this.fetchData()
        }
      })
    },
    handleShowEdit(dataset) {
      if (dataset) {
        this.dataset = JSON.parse(JSON.stringify(dataset))
        this.dialogTitle = '修改'
      } else {
        this.dialogTitle = '新增'
      }
      this.addVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.el-form-item{
  margin-bottom: 0;
}
.el-form--label-top .el-form-item__label{
  padding-bottom: 0;
}
.top {
  margin-bottom: 10px;
  .search{
    display: flex;
    line-height: 40px;
  }
}

.content {
  overflow: hidden;
}

.box-card {
  width: 23%;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
  float: left;
}

.count {
  margin-bottom: 10px;
  font-size: 14px;
}

.item {
  display: flex;
  margin-top: 3px;
}
</style>
